Components › Forms & input › Date & time › Picker panel

Picker panel

canon

Anchored floating container that hosts the calendar or time list.

Used in 8 files · 7 areas · 8× — components/callwrapup, components/color, components/projects, components/segment, components/tasks, components/timeline …

@acrm/ui <PickerPanel>.dp-panel .dp-scrimSourceStoryLegacy card dates.html
ExamplesCodeUsageAccessibilityChangelog

The floating layer of the date and time pickers. React <PickerPanel> (packages/ui/src/components/PickerPanel.tsx) portals .dp-scrim + .dp-panel to document.body, positions the panel to its anchor with the shared place() primitive and turns into a bottom sheet under 720px. It is not .acrm-popover — that layer pins to the trigger width and caps at 360px, while the range calendar needs 540px.

When to use

  • Hosting a Calendar (264 / 540px) or a Time list (132px) next to a .dp-field anchor — Date field, Date range, Time field all use it.
  • Any picker body whose width comes from its content, not from the trigger.

When not to use

  • Menus, selects and pickers of options — Popover / Picker menu (.acrm-popover).
  • Inline calendars in the rail or in a filter chip menu — render Calendar directly, no panel.
  • Dialogs with a footer of actions — Dialog.

Anatomy

  • .dp-scrim: fixed, full viewport, z-index: 100, transparent on desktop; mousedown closes.
  • .dp-panel: fixed, z-index: 101, --surface-100, 1px --border-strong, --radius-md, --shadow-pop, padding --sp-2; width shrinks to the child (.dp-pop, .dp-timelist).
  • Position: place(anchorRect, size, 'start') — below the anchor, flips above at the bottom edge, clipped to the viewport; re-measured on scroll and resize, closes when the anchor leaves the viewport. dep forces a re-measure when the body height changes.
  • Mobile ≤720px .sheet: bottom sheet full width, max-height: 86vh, --radius-xl top corners, drag handle ::before 36×4, dimmed scrim rgba(0,0,0,.32), aria-modal; touch targets 44px (days, options, foot buttons), one month.
  • Role dialog with ariaLabel from the host ("Vybrat datum", "Vybrat rozsah", "Čas").

Best practices

Do
  • Anchor to the whole .dp-field (not the input) so the panel aligns with the field edge.
  • Pass dep with the value when the body height changes (range head, "Vymazat" foot).
  • Let the host return focus on close (onClose → inputRef.focus()).
Don’t
  • Reusing .acrm-popover for a calendar — width and max-width are wrong for 540px.
  • Adding a header, title or close button to the panel; the body (presets, grid, foot) is the whole content.
  • Stacking a second panel: at most one is open, and the host relies on that for blur handling.

Content

  • The panel has no copy of its own; labels come from the host (ariaLabel) and the body.
  • Foot action inside the body is "Vymazat" (.dp-clear), optional "Přidat čas" (.dp-addtime) in the task panel.
  • calendar, time-field — the bodies.
  • popover (Popover family) — the general menu layer this is deliberately not.
  • dialog — the mobile sheet shares its drag-handle affordance.

Source: docs/date-time/picker-panel.usage.md · GitLab